<!DOCTYPE html>
<html lang="en">
<head>
    <title>消息</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./assets/libs/layui/css/layui.css"/>
    <style>
        .layui-card-body {
            padding: 0;
        }

        .theme-div {
            padding-left: 15px;
            padding-top: 20px;
            margin-bottom: 10px;
        }

        .btnTheme {
            display: inline-block;
            margin: 0 6px 15px 0;
            padding: 4px;
            border: 1px solid #fff;
        }

        .btnTheme img {
            width: 80px;
            height: 50px;
            border: 1px solid #f2f2f2;
            background: #F2F2F2;
            cursor: pointer;
        }

        .btnTheme:hover, .btnTheme.active {
            border-color: #5FB878;
        }

        .more-menu-item {
            display: block;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            border-bottom: 1px solid #e8e8e8;
            color: #333;
            padding: 0px 25px;
            font-style: normal;
        }

        .more-menu-item:first-child {
            border-top: 1px solid #e8e8e8;
        }

        .more-menu-item:hover {
            background: #F2F2F2;
            color: #333;
        }

        .more-menu-item .layui-icon {
            padding-right: 10px;
            font-size: 18px;
        }

        .more-menu-item:after {
            content: "\e602";
            font-family: layui-icon !important;
            position: absolute;
            right: 16px;
        }
    </style>
</head>
<body>

<div class="layui-card-header">设置主题</div>
<div class="layui-card-body">
    <div class="theme-div">
        <div class="btnTheme">
            <img src="./assets/images/img_theme_1.png" title="黑白主题">
        </div>
        <div class="btnTheme" theme="theme-black" title="黑色主题">
            <img src="./assets/images/img_theme_2.png">
        </div>
        <div class="btnTheme" theme="theme-cyan" title="藏青主题">
            <img src="./assets/images/img_theme_7.png">
        </div>
        <div class="btnTheme" theme="theme-blue-white" title="蓝白主题">
            <img src="./assets/images/img_theme_3.png">
        </div>
        <div class="btnTheme" theme="theme-blue" title="蓝黑主题">
            <img src="./assets/images/img_theme_4.png">
        </div>
        <div class="btnTheme" theme="theme-blue-side" title="蓝色主题">
            <img src="./assets/images/img_theme_5.png">
        </div>
        <div class="btnTheme" theme="theme-white" title="白色主题">
            <img src="./assets/images/img_theme_6.png" style="border-color: #cccccc;">
        </div>
        <div class="btnTheme" theme="theme-green-dark" title="暗绿主题">
            <img src="./assets/images/img_theme_9.png">
        </div>
        <div class="btnTheme" theme="theme-green" title="绿色主题">
            <img src="./assets/images/img_theme_8.png">
        </div>
        <div class="btnTheme" theme="theme-red-white" title="红白主题">
            <img src="./assets/images/img_theme_12.png">
        </div>
        <div class="btnTheme" theme="theme-red-dark" title="暗红主题">
            <img src="./assets/images/img_theme_11.png">
        </div>
        <div class="btnTheme" theme="theme-red" title="红色主题">
            <img src="./assets/images/img_theme_10.png">
        </div>
    </div>

    <!--<div>-->
        <!--<a class="more-menu-item" href="https://easyweb.vip"-->
           <!--target="_blank">-->
            <!--<i class="layui-icon layui-icon-website"></i> 前往官网-->
        <!--</a>-->
        <!--<a class="more-menu-item" href="https://whvse.gitee.io/easyweb-html/doc/iframe/" target="_blank">-->
            <!--<i class="layui-icon layui-icon-read" style="font-size: 19px;"></i> 开发文档-->
        <!--</a>-->
        <!--<a class="more-menu-item" href="https://demo.easyweb.vip/pro" target="_blank">-->
            <!--<i class="layui-icon layui-icon-tabs" style="font-size: 16px;"></i> &nbsp;单标签版本-->
        <!--</a>-->
        <!--<a class="more-menu-item" href="https://demo.easyweb.vip/theme"-->
           <!--target="_blank">-->
            <!--<i class="layui-icon layui-icon-theme"></i> 主题生成器-->
        <!--</a>-->
    <!--</div>-->
</div>

<script type="text/javascript" src="./assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="./assets/js/common.js"></script>
<script>
    layui.use(['layer'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;

        // 选中缓存主题
        var setCurrentTheme = function () {
            $('.btnTheme').removeClass('active');
            var theme = layui.data('easyweb').theme;
            if (theme) {
                $('.btnTheme[theme=' + theme + ']').addClass('active');
            } else {
                $('.btnTheme').eq(0).addClass('active');
            }
        };
        setCurrentTheme();

        // 切换主题
        $('.btnTheme').click(function () {
            var theme = $(this).attr('theme');
            layui.data('easyweb', {
                key: 'theme',
                value: theme,
                remove: !theme
            });
            setCurrentTheme();
            try {
                top.layui.admin.changeTheme(theme ? './assets/css/' + theme + '.css' : theme);
            } catch (e) {
                console.log(e);
            }
        });
    });
</script>
</body>
</html>